<template>
    <div style="padding:1%;margin-left: 15%;height: 100%;background-color: #f5f7f9;!important;">
        <Card :bordered="false" dis-hover>
            <p slot="title"
               style="font-size: larger;font-weight: bolder;display: flex;justify-content: space-between;height: 36px">
                <span>日志管理 / 更新日志列表</span>
                <Button type="info" ghost icon="md-add" @click="addLogVisable=true">添加日志</Button>
            </p>
            <!--日志表格-->
            <div>
                <Table :height="508" stripe :columns="logColumns" :data="logList">
                    <template slot-scope="{ row }" slot="action">
                        <Button ghost type="info" size="small" icon="md-create" style="margin-right: 5px"
                                @click="editLog(row)">编辑
                        </Button>
                        <Button ghost type="error" size="small" icon="md-trash" @click="deleteLog(row.upId)">删除</Button>
                    </template>
                </Table>
            </div>
        </Card>
        <!--添加日志对话框-->
        <Modal v-model="addLogVisable" title="添加日志" footer-hide>
            <Form ref="logVoRef" :model="logVo" :rules="logVoRules" :label-width="120">
                <FormItem label="日记内容:" prop="content">
                    <Input v-model="logVo.content" type="textarea"
                           placeholder="请输入日记内容" :rows="6"/>
                </FormItem>
                <Button type="success" long @click="addLog('logVoRef')">提交</Button>
                <Button style="margin-top: 10px" long @click="addLogVisable=false">取消</Button>
            </Form>
        </Modal>
        <!--编辑日志对话框-->
        <Modal v-model="editLogVisable" title="添加日志" footer-hide :closable="false">
            <Form ref="logVoRef" :model="logVo" :rules="logVoRules" :label-width="120">
                <FormItem label="日记内容:" prop="content">
                    <Input v-model="logVo.content" type="textarea"
                           placeholder="请输入日记内容" :rows="6"/>
                </FormItem>
                <Button type="success" long @click="updateLog('logVoRef')">提交</Button>
                <Button style="margin-top: 10px" long @click="cancelUpdate">取消</Button>
            </Form>
        </Modal>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        logList: [],
        logColumns: [
          {
            type: 'index',
            align: 'center'
          },
          {
            title: '日志内容',
            key: 'upContent',
            width: '500px',
            align: 'center'
          },
          {
            title: '日志更新时间',
            key: 'upUpdatetime',
            align: 'center'
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        logVo: {
          id: 0,
          content: ''
        },
        addLogVisable: false,
        editLogVisable: false,
        logVoRules: {
          content: [
            { required: true, message: '日志内容不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    mounted() {
      this.getLogs()
    },
    methods: {
      getLogs() {
        this.$http.get('updateLog').then(res => {
          res = res.data;
          if (res.code === 0) {
            this.logList = res.data
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 删除日志
      deleteLog(id) {
        this.$Modal.confirm({
          title: '删除',
          content: '您确定要删除该日志吗？',
          onOk: () => {
            this.$http.delete(`update-log?id=${id}`).then(res => {
              res = res.data;
              if (res.code === 6420) {
                this.getLogs()
                this.$Message.success(res.msg)
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        })
      },
      // 添加日志
      addLog(name) {
        this.$refs[name].validate(valid => {
          if (!valid) return;
          this.$http.post('update-log', new URLSearchParams(this.logVo)).then(res => {
            res = res.data;
            if (res.code === 6401) {
              this.$Message.success(res.msg);
              this.getLogs();
              this.logVo.content = ''
              this.addLogVisable = false;
            } else {
              this.$Message.error(res.msg);
            }
          })
        })
      },
      // 编辑日志
      editLog(row) {
        this.logVo.id = row.upId;
        this.logVo.content = row.upContent;
        this.editLogVisable = true;
      },
      // 更新日志
      updateLog(name) {
        this.$refs[name].validate(valid => {
          if (!valid) {
            return
          }
          this.$http.put('update-log', new URLSearchParams(this.logVo)).then(res => {
            res = res.data;
            if (res.code === 6410) {
              this.logVo.content = ''
              this.editLogVisable = false
              this.$Message.success(res.msg)
              this.getLogs()
            } else {
              this.$Message.error(res.msg)
            }
          })
        })
      },
      // 取消更新日志
      cancelUpdate() {
        this.logVo.id = 0;
        this.logVo.content = '';
        this.editLogVisable = false;
      }
    }
  }
</script>

<style scoped>

</style>
